<template>
  <div class="companyInfo">
    <header>
      <div class="header-container">
        <div class="base-info-container">
          <img width="103px" height="103" :src="companyInfo.ico">
          <div class="info">
            <p class="name">{{companyInfo.name}}</p>
            <p class="desc">{{companyInfo.financing}}<em class="dolt"></em>{{companyInfo.scale}}
              <!--<em class="dolt"></em>其他行业-->
            </p>
          </div>
        </div>
        <div class="position-info-container">
          <span>
            <p>{{companyInfo.jobNum}}</p>
            在招职位
          </span>
          <i class="vline"></i>
          <span>
            <p>{{companyInfo.recruiterNum}}</p>
            猎头
          </span>
        </div>
      </div>
      <div class="switch-bar">
        <ul>
          <li :class="{chosen: curPageStatus === 0}" @click="curPageStatus = 0">公司简介</li>
          <li :class="{chosen: curPageStatus === 1}" @click="curPageStatus = 1">
            招聘职位({{companyInfo.jobNum}})
          </li>
        </ul>
      </div>
    </header>
    <main v-if="curPageStatus === 0" class="intro-status">
      <main>
        <div class="intro">
          <h3 class="title">{{companyInfo.name}}简介</h3>
          <div class="intro-content" v-html="companyInfo.description"></div>
        </div>
        <h3 class="title">公司地址</h3>
        <p>{{companyInfo.address}}</p>
        <h3 class="title">法律信息</h3>
        <p>注册资本：{{companyInfo.capital}}万元<i class="vline"></i>法人代表：{{companyInfo.legalPerson}}</p>
      </main>
      <aside>
        <h3 class="title">公司环境</h3>
        <swiper :options="swiperOption">
          <swiper-slide v-for="i of companyInfo.imgList" :key="i">
            <img width="360" :src="i" >
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </aside>
    </main>
    <main v-if="curPageStatus === 1" class="job-status">
      <div class="search-box">
        <div class="select-container">
          <Select
            width="145px"
            v-model="exp"
            placeholder="工作经验" v-on:on-change="getJobs">
            <Option
              v-for="item of [{key: 0, value: '不限'},
              {key: 1, value: '应届生'},
              {key: 2, value: '1年以内'},
              {key: 3, value: '1-3年'},
              {key: 4, value: '3-5年'},
              {key: 5, value: '5-10年'},
              {key: 6, value: '10年以上'}]"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
          <Select
            width="145px"
            v-model="edubg"
            placeholder="学历要求" v-on:on-change="getJobs">
            <Option
              v-for="item of [{key: 0, value: '不限'},
                {key: 1, value: '小学'},
              {key: 2, value: '初中'},
              {key: 3, value: '高中'},
              {key: 4, value: '大专'},
              {key: 5, value: '本科'},
              {key: 6, value: '研究生'},
              {key: 7, value: '博士'}]"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
          <Select
            width="145px"
            v-model="salary"
            placeholder="薪资要求" v-on:on-change="getJobs">
            <Option
              v-for="item of [{key: '', value: '不限'},
              {key: 0, value: '3k以下'},
              {key: 1, value: '3-5k'},
              {key: 2, value: '5-10k'},
              {key: 3, value: '10-15k'},
              {key: 4, value: '15-20k'},
              {key: 5, value: '20-30k'},
              {key: 6, value: '30-50k'},
              {key: 7, value: '50k以上'},]"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
          <p @click="clearOption">清空筛选条件</p>
        </div>
      </div>
      <div class="job-container">
        <template v-if="jobInfo.length !== 0">
          <div class="card" v-for="job of jobInfo" :key="job.id">
            <div class="left">
              <p class="job-name">
                {{ job.name }}
                <span class="salary">{{ job.minSalary }}~{{ job.maxSalary }}/天</span>
                <span class="company-info">
                  <header>
                    <p class="title">{{ job.name }}</p>
                    <p class="desc">{{ job.companyName }}
                      <i class="inline"></i>HR:
                      {{ job.emplName }}
                    </p>
                    <div class="btn primary" @click="getChat(job)">立即沟通</div>
                  </header>
                  <div class="job-desc">
                    <p class="title">职位描述</p>
                    <GeminiScrollbar :forceGemini="true" style="height:180px;">
                      <div class="desc" v-html="job.desc"></div>
                    </GeminiScrollbar>
                  </div>
                </span>
              </p>
              <p class="desc">
                {{ job.loc }} <i class="inline"></i>
                {{ job.exp }} <i class="inline"></i>
                {{ job.edubg }}
              </p>
            </div>
            <div class="right unhover">
              <p class="empl-name">
                <img width="20" src="@/assets/img/default.png">
                {{ job.emplName }} <i class="inline"></i>
                {{ job.emplJob }}
              </p>
              <p class="desc">发布于: {{ job.date }}</p>
            </div>
            <div class="right onhover">
              <div class="btn primary" @click="getChat(job)">立即沟通</div>
              <div class="btn primary" @click="addDelivery(job.id)">一键投递</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="card" style="cursor:default;">
            <p style="font-size:14px">Emmm找不到您需要的职位</p>
          </div>
        </template>
        <footer v-if="jobInfo.length !== 0">
          <Pages
            @setCurPage="setCurPage"
            :curPage="curPage"
            :total="total"
            :pageSize="pageSize"></Pages>
        </footer>
      </div>
    </main>
  </div>
</template>
<script>
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import Pages from '@/components/Pages/index';
// eslint-disable-next-line import/no-extraneous-dependencies
import 'swiper/dist/css/swiper.css';
// eslint-disable-next-line import/no-extraneous-dependencies
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import api from '@/api/companyInfo';
import nginx from '@/assets/nginxconfig';

export default {
  name: 'CompanyInfo',
  data() {
    return {
      swiperOption: {
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      // 0公司简介，1招聘职位
      curPageStatus: 0,

      worktype: '',
      workname: '',
      exp: '',
      edubg: '',
      salary: '',
      economic: '',
      scale: '',
      workdirection: '',
      typelist: [],
      companyInfo: '',
      jobInfo: [
        {
          id: 20000,
          name: 'WXZ-10011 java后端开发',
          minSalary: '100',
          maxSalary: '300',
          loc: '广州',
          exp: '1-3年',
          edubg: '本科',
          companyName: '腾讯',
          companyLine: '互联网',
          economicStatus: '不需要融资',
          emplNum: '10000人以上',
          emplName: '李博一心',
          emplJob: '招聘者',
          date: '2019-04-01',
          desc: '可以可以可以',
        },
        {
          id: 30000,
          name: 'WXZ-10011 java后端开发',
          minSalary: '1000',
          maxSalary: '3000',
          loc: '广州',
          exp: '1-3年',
          edubg: '本科',
          companyName: '腾讯',
          companyLine: '互联网',
          economicStatus: '不需要融资',
          emplNum: '10000人以上',
          emplName: '李博一心',
          emplJob: '招聘者',
          date: '2019-04-01',
          desc: '可以可以可以',
        },
      ],

      curPage: 1,
      pageSize: 20,
      total: 1000,
    };
  },
  methods: {
    getChat(p) {
      if (!sessionStorage.getItem('userId')) {
        this.$alert('请先登录');
        return;
      }
      this.$router.push({ name: 'ChatRoom', query: { person: p } });
    },
    addDelivery(jobId) {
      if (!sessionStorage.getItem('userId')) {
        this.$alert('请先登录');
        return;
      }
      const params = new URLSearchParams();
      params.append('userId', sessionStorage.getItem('userId'));
      params.append('jobId', jobId);
      api.addDeliveryApi(params).then((response) => {
        this.$alert(response.data.data);
      });
    },
    getJobsInfoNotLogin() {
      const params = new URLSearchParams();
      params.append('exp', this.exp);
      params.append('edu', this.edubg);
      params.append('money', this.salary);
      params.append('financing', this.economic);
      params.append('scale', this.scale);
      params.append('jobType', this.worktype);
      params.append('jobName', this.workname);
      params.append('rows', '3');
      params.append('page', this.curPage);
      api.getJobsInfoNotLoginApi(params).then(async (response) => {
        this.jobInfo = [];
        const datas = response.data.rows;
        this.total = response.data.total;
        this.curPage = response.data.pageNu;
        for (let i = 0; i < datas.length; i += 1) {
          this.jobInfo.push(
            {
              id: datas[i].bjob.businessId,
              name: datas[i].bjob.name,
              minSalary: datas[i].bjob.minSalary,
              maxSalary: datas[i].bjob.maxSalary,
              desc: datas[i].bjob.description,
              loc: datas[i].ecity.name,
              exp: this.getExpName(datas[i].bjob.experience),
              edubg: this.getEduName(datas[i].bjob.educated),
              companyName: datas[i].bcompany.name,
              companyLine: datas[i].bcompany.legalPerson,
              economicStatus: this.getFinName(datas[i].bcompany.financing),
              emplNum: this.getScaName(datas[i].bcompany.scale),
              emplName: datas[i].sysUser.realname,
              emplJob: datas[i].bdept.name,
              date: datas[i].bjob.createDate,
              otherId: datas[i].sysUser.businessId,
            },
          );
        }
      });
    },
    getFinName(id) {
      switch (id) {
        case '0':
          return '天使轮';
        case '1':
          return 'A轮';
        case '2':
          return 'B轮 ';
        case '3':
          return 'C轮';
        case '4':
          return '不需要融资';
        default:
          return null;
      }
    },
    getScaName(id) {
      switch (id) {
        case '0':
          return '1-10人';
        case '1':
          return '11-50人';
        case '2':
          return '51-100人 ';
        case '3':
          return '101-500人';
        case '4':
          return '501-1000人';
        case '5':
          return '1001-5000人';
        case '6':
          return '5001-10000人';
        case '7':
          return '>10000人';
        default:
          return null;
      }
    },
    clearOption() {
      this.exp = 0;
      this.edubg = 0;
      this.salary = '';
      this.economic = '';
      this.scale = '';
      this.worktype = '';
      this.workname = '';
      this.getJobs();
    },
    setCurPage(page) {
      this.curPage = page;
    },
    getDetail(id) {
      const params = new URLSearchParams();
      params.append('companyId', id);
      api.queryBCompanyDetailApi(params).then(async (response) => {
        const data1 = response.data.data;
        let list = [];
        if (data1.bcompany.images) {
          list = data1.bcompany.images.split(',');
        }
        const newlist = [];
        for (let i = 0; i < list.length; i += 1) {
          newlist.push(nginx.nginxaddress + list[i]);
        }
        let jobNum1 = 0;
        if (data1.jobNum) {
          jobNum1 = data1.jobNum;
        }
        newlist.push();
        this.companyInfo = {
          name: data1.bcompany.name,
          address: data1.bcompany.address,
          id: data1.bcompany.businessId,
          capital: data1.bcompany.capital,
          description: data1.bcompany.description,
          establish: data1.bcompany.establish,
          financing: this.getFinName(data1.bcompany.financing),
          scale: this.getScaName(data1.bcompany.scale),
          ico: nginx.nginxaddress + data1.bcompany.ico,
          remark: data1.bcompany.remark,
          url: data1.bcompany.url,
          imgList: newlist,
          legalPerson: data1.bcompany.legalPerson,
          jobNum: jobNum1,
          recruiterNum: data1.recruiterNum,
        };
        this.getJobs();
      });
    },
    getJobs() {
      const params = new URLSearchParams();
      params.append('companyId', this.$route.query.id);
      params.append('exp', this.exp);
      params.append('edu', this.edubg);
      params.append('money', this.salary);
      params.append('rows', this.pageSize);
      params.append('page', this.curPage);
      api.getJobsInfoNotLoginApi(params).then(async (response) => {
        this.jobInfo = [];
        const datas = response.data.rows;
        this.total = response.data.total;
        this.curPage = response.data.pageNu;
        for (let i = 0; i < datas.length; i += 1) {
          this.jobInfo.push(
            {
              id: datas[i].bjob.businessId,
              name: datas[i].bjob.name,
              minSalary: datas[i].bjob.minSalary,
              maxSalary: datas[i].bjob.maxSalary,
              desc: datas[i].bjob.description,
              loc: datas[i].ecity.name,
              exp: this.getExpName(datas[i].bjob.experience),
              edubg: this.getEduName(datas[i].bjob.educated),
              companyName: datas[i].bcompany.name,
              companyLine: datas[i].bcompany.legalPerson,
              economicStatus: this.getFinName(datas[i].bcompany.financing),
              emplNum: this.getScaName(datas[i].bcompany.scale),
              emplName: datas[i].sysUser.realname,
              emplJob: datas[i].bdept.name,
              date: datas[i].bjob.createDate,
              otherId: datas[i].sysUser.businessId,
            },
          );
        }
      });
    },
    getExpName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '应届生';
        case '2':
          return '一年以内 ';
        case '3':
          return '一到三年';
        case '4':
          return '三到五年';
        case '5':
          return '五到十年';
        case '6':
          return '五年以上';
        default:
          return null;
      }
    },
    getEduName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '小学';
        case '2':
          return '初中';
        case '3':
          return '高中';
        case '4':
          return '专科';
        case '5':
          return '本科';
        case '6':
          return '研究生';
        case '7':
          return '博士';
        default:
          return null;
      }
    },
  },
  mounted() {
    this.getDetail(this.$route.query.id);
    // console.log(this.$route.query.id);
  },
  components: {
    swiper,
    swiperSlide,
    Select,
    Option,
    Pages,
  },
};
</script>
<style lang="less">
@import url(../../static/style/site.vars.less);
.companyInfo {
  &>header {
    background: #444C5F;
    .header-container {
      width: 1200px;
      margin: 0 auto;
      padding-top: 40px;
      padding-bottom: 20px;
      height: 100%;
      display: flex;
      .base-info-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: rgba(255,255,255,.7);
        flex: 1;
        .info {
          margin-left: 20px;
          height: 103px;
          margin-top: -20px;
          .name {
            color: #fff;
            font-size: 30px;
            margin-bottom: 10px;
          }
          .desc {
            font-size: 14px;
          }
        }
      }
      .position-info-container {
        color: #fff;
        display: flex;
        .vline {
          height: 50px;
          background: #636b7c;
          margin: 0 35px;
        }
        &>span {
          text-align: center;
          font-size: 14px;
          p {
            font-size: 36px;
            letter-spacing: .5px;
          }
        }
      }
    }
    .switch-bar {
      margin: 0 auto;
      width: 1200px;
      height: 46px;
      color: #fff;
      ul {
        list-style: none;
        li {
          border-bottom: 4px transparent solid;
          float: left;
          margin-right: 60px;
          padding: 10px 0;
          cursor: pointer;
          user-select: none;
        }
        .chosen {
          border-color: rgb(43, 142, 255);
          color: rgb(43, 142, 255);
        }
      }
    }
  }
  &>main {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    &.job-status {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      box-sizing: border-box;
      .search-box {
        padding: 10px;
        height: 80px;
        background: #fff;
        box-shadow: 0 3px 6px rgba(6,0,1,.05);
        width: 100%;
        box-sizing: border-box;
        .select {
          border: 0;
        }
        .select-container {
          font-size: 12px;
          margin-top: 25px;
          p {
            display: inline-block;
            margin-left: 15px;
            cursor: pointer;
            color: rgb(161, 161, 161);
          }
        }
      }
      .job-container {
        margin-top: 10px;
        width: 100%;
        .card {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 107px;
          background: #fff;
          padding-left: 40px;
          padding-right: 40px;
          box-sizing: border-box;
          cursor: pointer;
          transition: background .3s ease;
          &:hover {
            background: #F9FAFC;
          }
          &:hover .right.onhover {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-direction: row;
            &>.btn {
              margin-left: 10px;
            }
          }
          &:hover .right.unhover {
            display: none;
          }
          .left, .middle, .right {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            border-bottom: 1px solid rgb(230, 230, 230);
            box-sizing: border-box;
          }
          .left {
            flex: 1.8;
            .job-name {
              color: @site-main;
              font-size: 18px;
              margin-bottom: 5px;
              position: relative;
              width: calc(100% - 30px);
              &:hover .company-info {
                opacity: 1;
                z-index: 100;
              }
              .salary {
                color: #FC7076;
                margin-left: 10px;
              }
              .company-info {
                z-index: -100;
                height: 325px;
                width: 400px;
                position: absolute;
                // display: none;
                opacity: 0;
                left: 270px;
                top: -26px;
                box-shadow: 0 0 12px -5px #999;
                header {
                  height: 85px;
                  box-sizing: border-box;
                  padding: 20px;
                  font-size: 16px;
                  background: rgba(233, 243, 255, 0.835);
                  .title {
                    margin-bottom: 5px;
                  }
                  .btn {
                    float: right;
                    position: relative;
                    top: -40px;
                  }
                }
                .job-desc {
                  padding: 20px;
                  background: #fff;
                  height: 200px;
                  .title {
                    font-size: 14px;
                    color: #000;
                    margin-bottom: 10px;
                  }
                }
              }
            }
            .desc {
              font-size: 12px;
              color: rgb(167, 167, 167);
            }
          }
          .middle {
            .company-name {
              font-size: 18px;
              margin-bottom: 5px;
              transition: color .3s ease;
              &:hover {
                color: @site-main;
              }
            }
            &>.desc {
              font-size: 12px;
              color: rgb(167, 167, 167);
            }
          }
          .right {
            flex: 1;
            height: 100%;
            align-items: flex-end;
            &.onhover {
              display: none;
            }
            .empl-name {
              font-size: 13px;
              display: flex;
              justify-content: center;
              align-items: center;
              &>img {
                border-radius: 20px;
                margin-right: 10px;
              }
            }
            &>.desc {
              font-size: 12px;
              color: rgb(167, 167, 167);
              padding-left: 30px;
              margin-top: 10px;
            }
          }

        }
        footer {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
          background: #fff;
        }
      }
    }
    &.intro-status {
      .title {
        margin-top: 20px;
        margin-bottom: 16px;
        position: relative;
        font-size: 16px;
        &::before {
          content: "";
          position: absolute;
          width: 30px;
          height: 3px;
          border-radius: 10px;
          background-color: @site-main;
          left: 0;
          top: 28.5px;
        }
      }
      main {
        box-sizing: border-box;
        width: 70%;
        padding-right: 20px;
        border-right: 1px #bbbbbb54 solid;
        .intro {
          .intro-content {
            p, li {
              margin: 5px 0;
              font-size: 15px;
              line-height: 30px;
            }
            li {
              margin-left: 40px;
            }
          }
        }
      }
      aside {
        padding-left: 20px;
        width: 30%;
        height: 300px;
        // background: rgba(0, 0, 0, 0.1);
        .swiper-container {
          height: 165px;
          background: rgba(0, 0, 0, 0.1);
          &:hover {
            .swiper-button-prev, .swiper-button-next {
              display: block;
            }
          }
          .swiper-button-prev, .swiper-button-next {
            display: none;
          }
          .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }

  }
  .dolt {
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    height: 2px;
    margin: 0 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.7);
  }
  .vline {
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
}
</style>

